<#--引入layout文件-->
<#include "/ma/_layout.ftl">

<@head_meta/>
<#--定义该界面需要引入的样式-->
<@head_css>

<!-- BEGIN PAGE LEVEL STYLES -->
<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/bootstrap-fileupload.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/jquery.gritter.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/chosen.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/select2_metro.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/jquery.tagsinput.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/clockface.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/bootstrap-wysihtml5.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/datepicker.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/timepicker.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/colorpicker.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/bootstrap-toggle-buttons.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/daterangepicker.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/datetimepicker.css"/>

<link rel="stylesheet" type="text/css" href="${base}/resources/ma/css/multi-select-metro.css"/>

<link href="${base}/resources/ma/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE LEVEL STYLES -->
</@head_css>
<@head_script/>

<#--定义该界面需要引入的script-->
<#macro bodyscript>

<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<script src="${base}/resources/ma/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="${base}/resources/ma/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="${base}/resources/ma/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="${base}/resources/ma/js/excanvas.min.js"></script>
<script src="${base}/resources/ma/js/respond.min.js"></script>
<![endif]-->
<script src="${base}/resources/ma/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="${base}/resources/ma/js/jquery.blockui.min.js" type="text/javascript"></script>
<script src="${base}/resources/ma/js/jquery.cookie.min.js" type="text/javascript"></script>
<script src="${base}/resources/ma/js/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL PLUGINS -->

<script type="text/javascript" src="${base}/resources/ma/js/ckeditor.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-fileupload.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/chosen.jquery.min.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/select2.min.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/wysihtml5-0.3.0.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-wysihtml5.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/jquery.tagsinput.min.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/jquery.toggle.buttons.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-datepicker.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-datetimepicker.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/clockface.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/date.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/daterangepicker.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-colorpicker.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/bootstrap-timepicker.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/jquery.inputmask.bundle.min.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/jquery.input-ip-address-control-1.0.min.js"></script>

<script type="text/javascript" src="${base}/resources/ma/js/jquery.multi-select.js"></script>

<script src="${base}/resources/ma/js/bootstrap-modal.js" type="text/javascript"></script>

<script src="${base}/resources/ma/js/bootstrap-modalmanager.js" type="text/javascript"></script>

<script src="${base}/resources/ma/js/form-components.js"></script>


<script type="text/javascript">
    $(document).on('click',"#submit",function () {
        console.log("验证未添加");

        var jsonforminfo = $("#simple_form").serialize();
        console.log("put请求数据"+jsonforminfo);
        $.ajax({
            url: $("#simple_form").attr("action"),
            type: "put",
            data: jsonforminfo,
            dataType: "json",
            success: function (data) {
//                alert(data.message);
                if (data.status == 'OK') {
                    console.log("更新成功，页面跳转");
                    window.location.href='${base}/admin/device';
                    <#--setTimeout("javascript:location.href='${base}/admin/device'", 5000);-->
                } else {
                    $("#message").css("color", "red");
                    $("#message").text(data.message);
                }
            },
            error: function (error) {
                console.log("error");
            }
        });
    })





    //    $(function () {
    //        $("#submit").bind("click", submit);
    //    });
    //    <!--检测值-->
    //    var checkNull = function () {
    //        if ($("#sysId").val() == "") {
    //            $("#message").html("设备标识不能为空");
    //            return false;
    //        }
    //        return true;
    //    }
    //    <!--submit-->
    //    var submit = function () {
    //        if (!checkNull())
    //            return false;
    //        var jsonforminfo = $("#simple_form").serialize();
    ////        alert(jsonforminfo);
    //        $.ajax({
    //            url: $("#simple_form").attr("action"),
    //            type: "put",
    //            data: jsonforminfo,
    //            dataType: "json",
    //            success: function (data) {
    ////                alert(data.message);
    //                if (data.status == 'OK') {
    //                    alert("更新成功");
    //                    $("#bookid").val("");
    //                    $("#message").css("color", "green");
    //                    $("#message").text(data.message);
    //                } else {
    //                    $("#message").css("color", "red");
    //                    $("#message").text(data.message);
    //                }
    //            },
    //            error: function (error) {
    //                alert("error");
    //            }
    //        });
    //    }
</script>

<!-- END PAGE LEVEL PLUGINS -->

</#macro>
<#--定义jQuery(document).ready();方法需要初始化的函数-->
<#macro script_ready>
FormComponents.init()
</#macro>

<@layout active_id="device" child_active_id="hardware">

<#--一定要包含于layout内-->
    <@pageheader page_title="设备管理" page_title_small="编辑设备Memo" nav1_title="" nav1_url="" nav2_title="设备管理" nav2_url="" nav3_title="编辑设备" nav3_url=""/>
<!-- BEGIN PAGE CONTENT-->

<div class="row-fluid">

    <div class="span12">

        <!-- BEGIN SAMPLE FORM PORTLET-->

        <div class="portlet box blue">

            <div class="portlet-title">

                <div class="caption"><i class="icon-reorder"></i>编辑用户</div>

                <div class="tools">

                    <a href="javascript:;" class="collapse"></a>

                    <a href="#portlet-config" data-toggle="modal" class="config"></a>

                    <a href="javascript:;" class="reload"></a>

                    <a href="javascript:;" class="remove"></a>

                </div>

            </div>

            <div class="portlet-body form">

                <!-- BEGIN FORM-->

                <form id="simple_form" action="${base}/admin/device" class="form-horizontal">

                    <div class="control-group">

                        <label class="control-label">设备ID</label>

                        <div class="controls">

                            <input type="text" class="span6 m-wrap" name="id" value="${device.id}" id="id"
                                   placeholder="设备ID"/>

                            <!--<span class="help-inline">Some hint here</span>-->

                        </div>

                    </div>
                    <div class="control-group">

                        <label class="control-label">设备名称</label>

                        <div class="controls">

                            <input type="text" class="span6 m-wrap" name="name" value="${device.name}" id="name"
                                   placeholder="设备名称"/>

                            <!--<span class="help-inline">Some hint here</span>-->

                        </div>

                    </div>

                    <div class="control-group">

                        <label class="control-label">设备标识</label>

                        <div class="controls">

                            <input type="text" class="span6 m-wrap popovers" data-trigger="hover"
                                   data-content="输入您想在系统上显示的名称." data-original-title="提示"
                                   name="sysId" value="${device.sysId}" id="sysId" placeholder="设备标识"/>

                        </div>

                    </div>

                    <div class="control-group">

                        <label class="control-label">设备加密</label>

                        <div class="controls">

                            <div class="input-icon left">

                                <i class="icon-envelope"></i>

                                <input class="m-wrap " type="text" placeholder="设备加密" name="key" value="${device.key}"
                                       id="key" placeholder="设备加密"/>

                            </div>

                        </div>

                    </div>
                    <div class="control-group">

                        <label class="control-label">periodDate</label>

                        <div class="controls">

                            <div class="input-icon left">

                                <i class="icon-headphones"></i>

                                <input class="m-wrap " type="text" placeholder="periodDate" name="periodDate"
                                       value="${device.periodDate}" id="periodDate" placeholder="periodDate"/>

                            </div>

                        </div>

                    </div>
                    <div class="control-group">

                        <label class="control-label">状态</label>

                        <div class="controls">

                            <label class="radio">

                                <input type="radio" name="status" value="ON" checked/>

                                启用

                            </label>

                            <label class="radio">

                                <input type="radio" name="status" value="OFF"/>

                                禁用

                            </label>

                        </div>

                    </div>

                <#--<div class="control-group">-->

                <#--<label class="control-label">备注</label>-->

                <#--<div class="controls">-->

                <#--<textarea class="span6 m-wrap" rows="3" name="remark" id="remark">${user.remark}</textarea>-->

                <#--</div>-->

                <#--</div>-->

                    <div class="form-actions">

                        <button type="button" id="submit" class="btn blue">保存</button>

                        <button type="button" class="btn" onclick="history.go(-1)">返回</button>

                    </div>

                </form>

                <!-- END FORM-->
                <#--<b style=color:blue><span id=jump>5</span> 秒钟后页面将跳转页面...</b>-->
            </div>

        </div>

        <!-- END SAMPLE FORM PORTLET-->

    </div>

</div>


</@layout>